//拖动指令
import { nextTick } from "vue"

export default {
	mounted(el, binding) {
		//弹框可拉伸最小宽高
		let minWidth = 600
		let minHeight = 300
		nextTick(() => {
			//获取弹框头部（这部分可双击全屏）
			const dialogHeaderEl = document.querySelector('.el-dialog__header')
			//弹窗
			const dragDom = document.querySelector('.el-dialog')
			//给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
			dragDom.style.overflow = "auto"
			//清除选择头部文字效果
			dialogHeaderEl.onselectstart = new Function("return false")
			//头部加上可拖动cursor
			dialogHeaderEl.style.cursor = 'move'

			// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
			const sty = (function () {
				if (window.document.currentStyle) {
					return (dom, attr) => dom.currentStyle[attr]
				} else {
					return (dom, attr) => getComputedStyle(dom, false)[attr]
				}
			})()

			let moveDown = (e) => {
				// 鼠标按下，计算当前元素距离可视区的距离
				const disX = e.clientX - dialogHeaderEl.offsetLeft
				const disY = e.clientY - dialogHeaderEl.offsetTop
				const screenWidth = document.body.clientWidth // body当前宽度
				const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
				const dragDomWidth = dragDom.offsetWidth // 对话框宽度
				const dragDomheight = dragDom.offsetHeight // 对话框高度
				const minDragDomLeft = dragDom.offsetLeft
				const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
				const minDragDomTop = dragDom.offsetTop
				const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
				// 获取到的值带px 正则匹配替换
				let styL = sty(dragDom, 'left');
				let styT = sty(dragDom, 'top');
				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
				if (styL.includes('%')) {
					// eslint-disable-next-line no-useless-escape
					styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
					// eslint-disable-next-line no-useless-escape
					styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
				} else {
					styL = +styL.replace(/\px/g, '')
					styT = +styT.replace(/\px/g, '')
				}

				document.onmousemove = function (e) {
					// 通过事件委托，计算移动的距离
					let left = e.clientX - disX
					let top = e.clientY - disY

					// 边界处理
					if (-left > minDragDomLeft) {
						left = -minDragDomLeft;
					} else if (left > maxDragDomLeft) {
						left = maxDragDomLeft;
					}
					if (-top > minDragDomTop) {
						top = -minDragDomTop;
					} else if (top > maxDragDomTop) {
						top = maxDragDomTop;
					}

					// 移动当前元素
					dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
				}

				document.onmouseup = function (e) {
					document.onmousemove = null
					document.onmouseup = null
				}
			}

			dialogHeaderEl.onmousedown = moveDown


			//移动端手指点击事件
			dialogHeaderEl.addEventListener('touchstart', (e) => {
				// 鼠标按下，计算当前元素距离可视区的距离
				const disX = e.changedTouches[0].clientX - dialogHeaderEl.offsetLeft
				const disY = e.changedTouches[0].clientY - dialogHeaderEl.offsetTop

				// 获取到的值带px 正则匹配替换
				let styL = sty(dragDom, 'left')
				let styT = sty(dragDom, 'top')

				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
				if (styL.includes('%')) {
					// eslint-disable-next-line no-useless-escape
					styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
					// eslint-disable-next-line no-useless-escape
					styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
				} else {
					styL = +styL.replace(/\px/g, '')
					styT = +styT.replace(/\px/g, '')
				}

				//移动端移动窗口事件
				dialogHeaderEl.addEventListener('touchmove', (e) => {
					// 通过事件委托，计算移动的距离
					let left = e.changedTouches[0].clientX - disX
					let top = e.changedTouches[0].clientY - disY

					// 移动当前元素
					dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
				})

				// dialogHeaderEl.addEventListener('touchend', function () {
				//     dialogHeaderEl.addEventListener('touchmove',null);
				//     // document.addEventListener('touchend',null);
				// });
			});

			//拉伸
			let resizeEl = document.createElement("div")
			dragDom.appendChild(resizeEl)
			//在弹窗右下角加上一个10-10px的控制块
			resizeEl.className = 'move-point'
			resizeEl.style.cursor = 'se-resize'
			resizeEl.style.position = 'absolute'
			resizeEl.style.height = '20px'
			resizeEl.style.width = '20px'
			resizeEl.style.right = '0px'
			resizeEl.style.bottom = '0px'
			resizeEl.style.background = 'rgba(0,0,0,0.2)'
			//鼠标拉伸弹窗
			resizeEl.onmousedown = (e) => {

				// 记录初始x位置
				const clientX = e.clientX
				// 鼠标按下，计算当前元素距离可视区的距离
				const disX = e.clientX - resizeEl.offsetLeft
				const disY = e.clientY - resizeEl.offsetTop

				document.onmousemove = function (e) {
					e.preventDefault(); // 移动时禁用默认事件

					// 通过事件委托，计算移动的距离 
					const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
					const y = e.clientY - disY
					//比较是否小于最小宽高
					dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
					dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
				};
				//拉伸结束
				document.onmouseup = function (e) {
					document.onmousemove = null
					document.onmouseup = null
					document.onmousedown = null
				}
			}
		})
	}
}